<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>details</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
  <link rel="stylesheet" href="./stylesheets/commom.css">
  <link rel="stylesheet" href="./stylesheets/details.css">
</head>

<body>
  <!-- 侧边栏 -->
  <div id="box">
    <div class="box_t">
      <span><i></i>在线咨询</span>
    </div>
    <div class="box_b">
      <span><i></i>TOP</span>
    </div>
  </div>
  <!-- 通知部分notice -->
  <div id="notice">
    <div class="swiper-container swiper3">
      <div class="swiper-wrapper">
        <div class="swiper-slide ">即日起至5.20任购满520即享刻字礼遇，随单可选情人节定制卡片</div>
        <div class="swiper-slide">520限定礼盒上市,爱,就冲动这一次.#LOVE AT FIRST CLASH</div>
      </div>
    </div>
  </div>
  <!-- loge头部header -->
  <div id="header">
    <div class="header-top">
      <div class="h_t_left">
        <ul>
          <li><a class="a1" href="#">专柜查询</a></li>
          <li class="li2"><strong></strong><a href="#">客服中心</a>

            <!-- 二级菜单 -->
            <div id="service" class="service1">
              <div class="xj xj1"></div>
              <div class="s_left">
                <div class="title">我能帮到您什么？</div>
                <div class="s_left_ul">
                  <div><a href="#">常见问题</a></div>
                  <div><a href="#">订单跟踪</a></div>
                  <div><a href="#">订购信息</a></div>
                </div>
                <div class="s_left_ul">
                  <div><a href="#">选择我们的原因</a></div>
                  <div><a href="#">送货与退货</a></div>
                </div>
              </div>
              <div class="s_right">
                <div class="title">联系我们</div>
                <div class="s_left_ul">
                  <div><a href="#">400-820-6362(9:00-21:00)</a></div>
                  <div><a href="#">在线咨询</a></div>
                  <div><a href="#">我们提供一周七天服务</a></div>
                </div>
              </div>
            </div>
          </li>
        </ul>

      </div>
      <div class="h_t_right">
        <ul>
          <li class="h_t_journal"><a href="">订阅电子杂志</a>
            <div class="h_t_j_o"></div>

            <!-- 二级菜单 -->
            <div id="service" class="service2">
              <div class="xj xj2"></div>
              <div class="s_left">
                <div class="title">订阅圣罗兰电子杂志</div>
                <p class="s_t_p1">请输入您的邮箱</p>

                <div class="s_t_inpt">
                  <input type="text">
                  <div class="s_t_p2">订阅</div>
                </div>
                <div class="s_t_agt">
                  <div class="checkbox"></div>
                  <p>我同意依照本<span>使用条款</span>和<span>隐私政策</span>对我的个人信息进行收集和使用；我已阅读并确认被给予充分机会理解该 <span>使用条款</span> 和
                    <span>隐私政策</span> 的内容。</p>
                </div>
              </div>
              <div class="s_right s_right_new">
                <div class="title">官网专享</div>
                <div><a href="#">立即成为圣罗兰美妆官网会员，尊享VIP独家礼遇。</a></div>
                <div class="s_left_ul">

                  <div><span></span> <a href="#">查看历史订单</a></div>
                  <div><span></span> <a href="#">官网独家礼赠</a></div>
                  <div><span></span> <a href="#">收藏您喜欢的产品</a></div>
                  <div><span></span> <a href="#">一手新品资讯</a></div>
                </div>
              </div>

            </div>

          </li>
          <li class="login"><a href="./login.html" id="loginreg">登录与注册</a>
            <div class="h_t_j_o"></div>
            <!-- 二级菜单 -->
            <div id="service" class="service4">
              <div class="xj xj4"></div>
              <div class="s_left">
                <div class="title">用户登录</div>
                <p class="s_t_p1">请输入您的邮箱</p>

                <div class="s_t_inpt">
                  <input type="text">
                  <div class="s_t_p2">订阅</div>
                </div>
                <div class="s_t_agt">
                  <div class="checkbox"></div>
                  <p>我同意依照本<span>使用条款</span>和<span>隐私政策</span>对我的个人信息进行收集和使用；我已阅读并确认被给予充分机会理解该 <span>使用条款</span> 和
                    <span>隐私政策</span> 的内容。</p>
                </div>
              </div>
              <div class="s_right s_right_new">
                <div class="title">官网专享</div>
                <div><a href="#">加入YSL官网的过程很简单, 您只需点击“立即注册”, 即可进入注册过程, 尊享会员专属权益。</a></div>
                <div class="s_left_ul">
                  <div><span></span><a href="#">查看历史订单</a></div>
                  <div><span></span><a href="#">官网独家礼赠</a></div>
                  <div><span></span><a href="#">收藏您喜欢的产品</a></div>
                  <div><span></span><a href="#">一手新品资讯</a></div>
                </div>
                <div class="btn_box">
                  <a href="#">立即注册</a>
                </div>
              </div>
            </div>


          </li>
          <li class="h_t_shopbags">
            <a href="./shop.html">
              <strong></strong>
              <a href="./shop.html" target="_blank" class="a_h">购物袋<span class="carnumber">0</span>件商品</a>
              <div class="h_t_h"></div>
            </a>
            <!-- 购物袋 -->
            <div id="service" class="service3">
              <div class="xj xj3"></div>
              <div class="s_content">您的圣罗兰购物袋是空的. <br><span>马上添加您最喜欢圣罗兰的产品</span></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <a href="#"><img src="./images/logo.png" alt="YSL圣罗兰美妆官方网站暨网上商城" title="YSL圣罗兰美妆官方网站暨网上商城"></a>
  </div>
  <!-- nav导航部分 -->
  <div id="nav">
    <div class="nav_left">
      <ul>
        <li class="makeup"><a href="#">彩妆</a>
          <div class="m_xsj"></div>
          <!-- 二级菜单 -->
          <ul class="menu_2">
            <li><a href="#" class="menu_2_li">唇部</a>
              <ul>
                <li><a href="#">唇膏</a></li>
                <li><a href="#">唇部</a></li>
                <li><a href="#">唇油</a></li>
                <li><a href="#">唇夹霜</a></li>
                <li><a href="#">唇釉</a></li>
              </ul>
            </li>
            <li><a href="#" class="menu_2_li">面部</a>
              <ul>
                <li><a href="#">明彩笔</a></li>
                <li><a href="#">妆前隔离</a></li>
                <li><a href="#">粉饼</a></li>
                <li><a href="#">蜜粉</a></li>
                <li><a href="#">腮红</a></li>
              </ul>
            </li>
            <li><a href="#" class="menu_2_li">眼部</a>
              <ul>
                <li><a href="#">唇膏</a></li>
                <li><a href="#">唇部</a></li>
                <li><a href="#">唇油</a></li>
                <li><a href="#">唇夹霜</a></li>
                <li><a href="#">唇釉</a></li>
              </ul>
            </li>
            <li><a href="#" class="menu_2_li">甲油</a></li>
            <li><a href="#" class="menu_2_li">套装及工具</a></li>

            <div class="ul_button">
              <div class="ul_button_a">
                <div class="ul_button_left">
                  <div class="ul_button_left_l">
                    <span>热卖</span>
                    <img src="./images/nav1.jpg" alt="圣罗兰莹亮纯魅唇膏" title="圣罗兰莹亮纯魅唇膏">
                  </div>
                </div>
              </div>
            </div>
          </ul>
        </li>

        <li><a href="#">护肤</a></li>
        <li><a href="#">香水</a></li>
        <li><a href="#">明星产品</a></li>
        <li><a href="#">520限定礼盒</a></li>
        <li><a href="#">会员中心</a></li>
        <li><a href="#">私人定制服务</a></li>
      </ul>
      <form action="">
        <input type="text" placeholder="YSL气垫">
        <a href="#"><strong></strong></a>
      </form>
    </div>
  </div>
  <!-- 面包屑导航 -->
  <div id="boad">
    <ol class="cd-breadcrumb custom-separator">
      <li><a href="#0">首页</a></li>
      <li class="current"><a href="#0" class="a2">彩妆</a></li>

    </ol>
  </div>
  <!-- 内容区 -->
  <div id="details_t">
    <div class="details_t_left">
      <!-- 选项卡的内容区 -->
      <div id="content">
        <div id="bigbox"></div>
        <div id="smallbox"></div>
        <img src="./images/detail1.jpg" alt="" style="display: block" class="mainimg">
        <img src="./images/detail2.jpg" alt="">
        <img src="./images/detail3.jpg" alt="">
        <img src="./images/detail4.jpg" alt="">
      </div>
      <span></span>
      <div class="details_t_l_l">
        <ul>
          <li class="act"><img src="./images/desm1.jpg" alt=""></li>
          <li><img src="./images/desm2.jpg" alt=""></li>
          <li><img src="./images/desm3.jpg" alt=""></li>
          <li><img src="./images/desm1.jpg" alt=""></li>
        </ul>
      </div>
    </div>
    <!-- 右边的部分 -->
    <div class="details_t_right">
      <h2>LOVE AT FIRST CLASH 2 LIPS SET</h2>
      <h1 id="h1">敢爱冲动两支装限定礼盒</h1>
      <div class="d_t_r_star">
        <span></span>
        <a href="#">添加你的评论</a>
      </div>
      <p class="d_t_r_p1">
        <b>限量3800套, 礼盒可选：</b>
        <br> 两支「方管」口红可选:
        <br> 珊瑚.西柚（限量新色方管N°105+N°106）搭配限量蓝绿爱心高定唇衣
        <span>查看详情</span>
      </p>
      <div class="d_t_r_c">
        <ul>
          <li class="detailli">
            <p class="p1">正红·柔粉（方管N°1+N°52）</p>
            <p class="p2">¥720</p>
          </li>
          <li class="detailli">
            <p class="p1">珊瑚·西柚（方管N°105+N°106）</p>
            <p class="p2">¥720</p>
          </li>
          <li class="detailli">
            <p class="p1">西柚·暖橘（方管N°106+N°107）</p>
            <p class="p2">¥720</p>
          </li>
          <li class="detailli">
            <p class="p1">橘红·珊瑚（方管N°13+N°17）</p>
            <p class="p2">¥720</p>
          </li>
          <li class="detailli">
            <p class="p1">珊瑚·西柚（方管N°105+N°106）</p>
            <p class="p2">¥720</p>
          </li>
          <li class="detailli">
            <p class="p1">珊瑚·暖橘（方管N°105+N°107）</p>
            <p class="p2">¥720</p>
          </li>
        </ul>
        <!-- 刻字 -->
        <div class="d_t_r_word">
          <div class="word_t">
            <i></i>
            <span>专属刻字</span>
            <p class="p1">勾选后点击加入购物袋，即享专属定制刻字服务。</p>
            <p class="p2">刻字服务为80元/次，如果每笔订单满520元，可尊享免费刻字服务。刻字工艺需耗时5工作日，最终配送时间会相应延长</p>
          </div>
        </div>
        <!-- 下面的购物车 -->
        <div class="d_t_r_car">
          <div class="d_t_r_car_add">
            <span class="reducecount">-</span>
            <span class="a3">1</span>
            <span class="addcount">+</span>
          </div>
          <div class="d_t_r_car_place"><span>￥720</span></div>
          <div class="d_t_r_car_join">
            <span></span>
            <b>加入购物车</b>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 详情介绍 -->
  <div id="detail">
    <div class="d_title">产品详情</div>
    <div class="d_content">
      <p><b>限量3800套, 礼盒可选：</b>
        <br>
        两支「方管」口红可选:
        <br>
        珊瑚.西柚（限量新色方管N°105+N°106）搭配限量蓝绿爱心高定唇衣
        <br>
        珊瑚.暖橘（限量新色方管N°105+N°107）搭配限量蓝绿爱心高定唇衣
        <br>
        西柚.暖橘（限量新色方管N°106+N°107）搭配限量玫橙爱心高定唇衣
        <br>
        正红.柔粉（方管N°1+N°52）搭配限量玫橙爱心高定唇衣
        <br>
        橘红.珊瑚（方管N°13+N°17）搭配限量玫橙爱心高定唇衣
        <br>
        520限量高定礼盒包装，同享线上限量卡片定制及刻字礼遇
      </p>
    </div>

  </div>
  
  <div class="d_detail">
    <img src="./images/details.jpg" alt="">
    <img src="./images/details2.jpg" alt="">
    <img src="./images/details3.jpg" alt="">
    <img src="./images/details4.jpg" alt="">
    <img src="./images/details5.jpg" alt="">
  </div>
  </script>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
  <script src="./scripts/common.js"></script>
  <script src="./scripts/details.js"></script>
</body>

</html>